<script>
import Vue from 'vue';
import ReferenceComponent from "./ReferenceComponent";
export default {
    name: "eleFormBuilder",
    props:{
        "form":{
            type: Array,
            default : () => []
        },
        "options": {
            type: Object,
            default : () => {}
        }
    },
    data(){
        return{
            loading:false,
            values:{

            }
        }
    },
    components:{
        ReferenceComponent
    },
    mounted() {
        console.log(this.getConfig())
        // console.log(resolve("src"))
        for (let formElement of this.form) {
            // 设置field
            if(formElement.field != null){
                this.$set(this.values, formElement.field, formElement.value )
                // this.values[formElement.field] = formElement.value;
            }
        }
        this.loading = true;
        console.log(this.values)
        if(this.options.gutter == null){
            this.options.gutter = 20;
        }
        if(this.options.span == null){
            this.options.span = 24;
        }
        if(this.options.labelWidth == null){
            this.options.labelWidth = "100px";
        }
        if(this.options.disabled == null){
            this.options.disabled = false;
        }
        if(this.options.defaultLayout == null){
            this.options.defaultLayout = true;
        }


    },
    render(createElement, context) {
        if(this.loading == false){
            return ;
        }
        const defaultLayout = () => {

            return <el-row gutter={this.options.gutter == null ? 20 : this.options.gutter}>
                {
                    (this.form || []).map(e => {
                        let labelWidth = e.col == null ? null : e.col.labelWidth ? e.col.labelWidth : null;
                        let span = e.col == null ? this.options.span : e.col.span ? e.col.span : 24;
                        // // 设置field
                        // if(e.field != null){
                        //     this.values[e.field] = e.value;
                        // }
                        let content = this.getDom(createElement, e);
                        // if(this.getDomTitle(e.type).includes("el-")){
                        //     content = this.getDom(createElement, e)
                        // }else{
                        //     content = this.getDom(createElement, e);
                        // }
                        return <el-col span={span}>
                            <el-form-item label={e.title} label-width={labelWidth}>
                                {content}
                            </el-form-item>
                        </el-col>;
                    })
                }
            </el-row>
        }

        const notDefaultLayout = () => {
            return <el-row gutter={this.options.gutter == null ? 20 : this.options.gutter}>
                <el-col span={this.options.span == null ? 24 : this.options.span}>
                    <el-form-item label="即时配送" label-width="120">
                        <el-switch ></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>;
        }
        return (
            <div>
                <el-form
                    ref='form'
                    {
                        ...{props:{
                                model:this.values,
                                size:"small",
                                ...this.options
                            }}

                    }
                    // model={this.values} disabled={this.options.disabled} label-width={this.options.labelWidth}
                    >
                        {
                            this.options.defaultLayout ? defaultLayout() : notDefaultLayout()
                        }
                    <el-row >
                        <el-col span={24}>
                            <div style={{marginLeft:this.options.labelWidth}}>
                                {
                                    this.submitGroup(createElement)
                                }
                            </div>

                        </el-col>
                    </el-row>
                </el-form>
            </div>
        );
    },
    methods:{
        getRef(ref){
            return this.$refs[ref]
        },
        // 单个会报找不到
        addComponent(item = null){
            if(item != null){
                this.addComponents([item]);
            }

        },
        addComponents(list = []){
            list.forEach(e => {
                Vue.component(e.name, e);
            })
            this.$forceUpdate()
        },
        // install覆盖
        getConfig(){

        },
        submitGroup(createElement){
            if(this.options.showSubmit != false){
                let size = this.options.size == null ? "small" : this.options.size; 
                return <div>
                    <el-button type="primary" size={size}>立即创建</el-button>
                    <el-button size={size}>取消</el-button>
                </div>
            }else{
                return this.options.submitGroup(createElement).map(e => {
                    return e;
                })

            }
        },
        submit(){
            console.log(this.values)
        },
        setOptions(field, options){
            let obj = this.form.find(e => e.field == field);
            this.$set(obj, "options", options)
            console.log(this.form)
            this.$forceUpdate();
        },
        fullBox(e){
            e.style = {
                width:"100%",...e.style
            }
        },
        createComponent(createElement, e){
            // console.log(require(e.path))
            // import("./Setting")
            let path = e.path//.replace("@", this.dirname);
            // console.log(path)
            return <ReferenceComponent app={path} prop={e.props}/>
        },

        getDomTitle(val){
            let arr = ['input', 'select', 'option', 'date-picker', 'cascader'];
            // 是否是element组件
            if(arr.indexOf(val) > -1){
                return 'el-' + val;
            }
            return val;
        },

        getDom(createElement, e){

            let type = e.type;

            let result = null;
            switch (true){
                case type == 'input' :
                    result = this.getInputDom(createElement, e);
                    break;
                case type == 'date-picker':
                    result = this.normalDom(createElement, e);
                    break;
                case type == 'select':
                    result = this.selectDom(createElement, e);
                    break;
                case type == 'cascader':
                    result = this.cascaderDom(createElement, e);
                    break;
                default :
                    result = this.normalDom(createElement, e);
                    break;


            }
            return result;
        },
        getInputDom(createElement, e){
            this.fullBox(e);
            return <elInput ref={e.field} v-model={this.values[e.field]}  {...e}></elInput>
        },
        normalDom(createElement, e){
            return createElement(this.getDomTitle(e.type),{
                props:{
                    value:this.values[e.field],
                    ...e.props
                },
                style:{
                    width:"100%",
                    ...e.style
                },
                on:{
                    input: val => this.values[e.field] = val,
                    ...e.on
                }
            })
        },
        selectDom(createElement, e){
            this.fullBox(e);
            return <el-select ref={e.field} v-model={this.values[e.field]} {...e}>
                {(e.options || []).map(e => {
                    return <el-option value={e.value} label={e.label}></el-option>
                })}
            </el-select>
        },
        cascaderDom(createElement, e){
            this.fullBox(e);
            console.log({...e})
            let a = {props:
                e.props
            };
            return <el-cascader ref={e.field}
                v-model={this.values[e.field]}  options={e.options} props={a} {...e}></el-cascader>
            // return createElement(this.getDomTitle(e.type),{
            //     props:{
            //         value:this.values[e.field],
            //         ...e.props
            //     },
            //     style:{
            //         width:"100%",
            //         ...e.style
            //     },
            //     on:{
            //         change: val => this.values[e.field] = val
            //     }
            // })
        }
    }
}
</script>
